<template>
  <div class="main">
    <div class="tit">
      <div class="left" @click="goback">←</div>
      <div class="mid">
        <van-search
          placeholder="搜索您想要的区域"
          background="#ff5654"
          shape="round"
          @click="goback1"
        />
      </div>
      <div class="right">
        <van-icon name="location-o" style="font-size: 30px" @click="goback3" />
      </div>
    </div>
    <div class="shaixuan">
      <!-- 导航筛选 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" disabled />
        <!-- 租金 -->
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="changeZhunjin"
        />
        <van-dropdown-item
          v-model="value3"
          :options="option3"
          @open="shaixuan"
        />

        <van-dropdown-item
          v-model="value4"
          :options="option4"
          @change="changeSort"
        />
      </van-dropdown-menu>
    </div>

    <!-- 主体展示 -->
    <div class="show">
      <div class="card" v-for="(item, index) in houseList" :key="index">
        <div @click="goHouse(item)">
          <img :src="imglist[item.imgUrl]" alt="" />
          <div class="right">
            <h3>{{ item.description }}</h3>
            <!-- <p>{{ item.floor }} {{ item.areaId }}</p> -->
            <p v-if="item.floor == 0">一室一厅 {{ item.areaId }}</p>
            <p v-if="item.floor == 1">两室一厅 {{ item.areaId }}</p>
            <p v-if="item.floor == 2">三室两厅 {{ item.areaId }}</p>
            <p v-if="item.floor == 3">三室一厅 {{ item.areaId }}</p>
            <p v-if="item.floor == 4">四室一厅 {{ item.areaId }}</p>
            <div class="last">
              <button>整租</button>
              <span>{{ item.price }}元/月</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选弹框 -->
    <div class="sxtk" v-show="sxtxDisaplay">
      <div class="zhezhao"></div>
      <div class="content">
        <h2 class="oneh2">筛选</h2>
        <div class="h2div"><h2 class="twoh2">单选</h2></div>
        <label
          ><input name="danxuan" type="radio" value="0" v-model="zhu" />
          <div class="danxuandiv">整租</div>
        </label>
        <label
          ><input name="danxuan" type="radio" value="1" v-model="zhu" />
          <div class="danxuandiv">品牌公寓</div></label
        >
        <label
          ><input name="danxuandiv" type="radio" value="2" v-model="zhu" />
          <div class="danxuandiv">合租</div>
        </label>
        <label
          ><input name="danxuan" type="radio" value="3" v-model="zhu" />

          <div class="danxuandiv">转租</div></label
        >
        <div class="tese">
          <h2>特色</h2>
        </div>
        <div class="fuxuan">
          <label
            :for="item.value"
            v-for="(item, index) in feature"
            :key="index"
          >
            <input
              type="checkbox"
              name="fuxuan"
              :id="item.value"
              :value="item.value"
              v-model="fuxuan"
            />

            <div class="fuxuandiv" @click="clickFuxuan(item.value, item.type)">
              {{ item.value }}
            </div>
          </label>
        </div>
        <!-- <div>
            {{fuxuan}}{{zhu}}
        </div> -->
        <!-- 选择房型 -->
        <van-dropdown-menu style="margin-bottom: 20px">
          <van-dropdown-item v-model="fangxing" :options="optionHouse" />
        </van-dropdown-menu>
        <div class="under">
          <button @click="clear">清空</button>
          <button @click="sure">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAfterShaixuan } from "../../../api/index";
// 引入事件中心
import { EventBus } from "../../../api/event-bus";
export default {
  data() {
    return {
      // 搜索框
      searchValue: "",
      value1: 0,
      // 租金
      value2: 0,
      min: "",
      max: "",
      city: "",
      //筛选
      value3: 0,
      // 排序
      value4: 0,
      option1: [{ text: "位置", value: 0 }],
      option2: [
        { text: "租金", value: 0 },
        { text: "5000以下", value: 1 },
        { text: "5000-6000", value: 2 },
        { text: "6000以上", value: 3 },
      ],
      option3: [{ text: "筛选", value: 0 }],
      option4: [
        { text: "排序", value: 0 },
        { text: "从上到下", value: 1 },
        { text: "从下至上", value: 2 },
      ],
      //   展示列表
      imglist: [
        //    动态绑定src需要用require
        require("../../../assets/image/banner1(1).png"),
        require("../../../assets/image/banner2.png"),
        require("../../../assets/image/banner3.png"),
        require("../../../assets/image/banner4.png"),
        require("../../../assets/image/banner5.png"),
        require("../../../assets/image/banner6.png"),
      ],
      houseList: [
        {
          description: "慧忠北里",
          floor: "3室1厅1卫-90平",
          areaId: "90平方",
          money: "6900/月",
          imgUrl: 0,
        },
      ],
      //   筛选单选
      shaixuanObj: {},
      sxtxDisaplay: false,
      // 单选
      zhu: "",
      //   复选
      fuxuanObj: {},
      fuxuan: [],
      feature: [
        { value: "月付", type: "community" },
        { value: "新上架", type: "roomTypeID" },
        { value: "近地铁", type: "lineNum" },
        // { value: "转租" },
        { value: "主卧", type: "lineId" },
        { value: "朝南", type: "oriented" },
        { value: "独卫", type: "tags" },
        { value: "带阳台", type: "tagsId" },
        { value: "电梯房", type: "communityID" },
        { value: "非一楼", type: "size" },
        { value: "非隔断", type: "geduan" },
      ],
      optionHouse: [
        { text: "选择房型", value: "" },
        { text: "一室一厅", value: 0 },
        { text: "两室一厅", value: 2 },
        { text: "三室一厅", value: 1 },
        { text: "三室两厅", value: 3 },
        { text: "四室一厅", value: 4 },
      ],
      // 房型
      fangxing: "",
      // 用来判断排序方式
      forSort: false,
      // 利用事件总线传值
      eventBusParam: "",
    };
  },
  methods: {
    // 用goback实现跳转
    goback() {
      this.$router.replace({ name: "hotsearch" });
    },
    goback1() {
      this.$router.replace({ name: "hotsearch" });
    },
    goback3() {
      this.$router.replace({ name: "location" });
    },
    // 点击筛选
    shaixuan() {
      this.sxtxDisaplay = true;
    },
    // 点击清空
    clear() {
      this.zhu = "";
      this.fuxuan = [];
    },
    // 筛选框点击确定
    async sure() {
      // 1、根据fuxuanObj zhu  fangxing 来发送筛选请求
      this.shaixuanObj = {
        roomType: this.zhu,
        floor: this.fangxing,
        ...this.fuxuanObj,
      };
      let {
        data: {
          data,
          meta: { status },
        },
      } = await getAfterShaixuan({
        ...this.shaixuanObj,
        city: this.city,
        min: this.min,
        max: this.max,
      });
      // 2.请求到数据后重新渲染页面
      if (status == 200) {
        this.$store.state.newhouseList = data;
        this.getNewHouseList();
      }
      // 关闭弹框
      this.sxtxDisaplay = false;
    },
    // 点击复选框
    clickFuxuan(item, type) {
      this.fuxuanObj[type] = item;
    },
    // 更新houseList
    getNewHouseList() {
      // 对this.$store.state.newhouseList进行排序
      function compare(property, forSort) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          if (forSort == false) {
            return value1 - value2;
          }
          return value2 - value1;
        };
      }
      // 让this.houseList等于排序后的afterList
      let afterHouse = this.$store.state.newhouseList.sort(
        compare("price", this.forSort)
      );
      this.houseList = afterHouse;
      // 更新houseList时就把city赋值
      if (this.houseList.length != 0) {
        this.city = this.houseList[0].areaName;
      }
    },
    // 改变租金
    async changeZhunjin() {
      // 1.点击租金切换框,获取对应value2的值，判断对应的范围0,1,2,
      // 2.获取到此时houseList 的city，根据city和租金发送请求
      // this.city = this.houseList[0].areaName;
      this.min = "";
      this.max = "";
      if (this.value2 == 0) {
        this.min = 0;
      }
      if (this.value2 == 1) {
        this.min = 0;
        this.max = 5000;
      }
      if (this.value2 == 2) {
        this.min = 5000;
        this.max = 6000;
      }
      if (this.value2 == 3) {
        this.min = 6000;
      }
      let {
        data: { data: houses },
        status,
      } = await getAfterShaixuan({
        ...this.shaixuanObj,
        city: this.city,
        min: this.min,
        max: this.max,
      });
      // 请求成功，把state里的houselist改为对应的house
      if (status == 200) {
        this.$store.state.newhouseList = houses;
      }
      // 调用getNewHouseList
      this.getNewHouseList();
    },
    // 改变排序方式
    changeSort() {
      if (this.value4 == 0 || this.value4 == 1) {
        this.forSort = false;
      }
      if (this.value4 == 2) {
        this.forSort = true;
      }
      this.getNewHouseList();
    },
    // 点击某房源跳转到对应的详情页
    goHouse(item) {
      // 使用事件总线传值
      this.eventBusParam = item;

      // 跳转到房子详情页
      this.$router.replace({ name: "house" });
    },

    //  写一个方法 实现 发送数据 
    sendMsg() {
       EventBus.$emit("houseItem", this.eventBusParam);
    }
  },
  // updated(){
  // console.log(' old  updated');
  //   this.sendMsg()
  // },
  created() {
      console.log('old  created');
    // 一进入页面就获取store里的newhouselist
    this.getNewHouseList();
  },
  destroyed() {

    console.log('old  destroyed');
    // EventBus.$emit("houseItem", this.eventBusParam);
    this.sendMsg()
  },
  props: ["tit"],
};
</script>

<style scoped lang='less'>
.main {
  height: 100%;
  width: 100%;
  background: #ededed;
  .tit {
    background: rgb(255, 86, 84);
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100px;
    .left {
      margin-left: 10px;
      flex: 1 1 auto;
      font-size: 50px;
    }
    .mid {
      flex: 1 1 auto;
      text-align: center;
      .van-search {
        // width:415px;
        height: 40px;
      }
    }
    .right {
      flex: 1 1 auto;
    }
  }
  .show {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    .card {
      margin-top: 20px;
      height: 200px;
      background: #fff;
      border-radius: 3px;
      padding: 10px 20px 10px 20px;
      img {
        width: 300px;
        height: 180px;
      }
      .right {
        float: right;
        width: 300px;
        color: #a0a0a0;
        h3 {
          font-size: 20px;
          margin-top: 40px;
          margin-bottom: 20px;
        }
        p {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 20px;
        }
        .last {
          button {
            font-size: 30px;
            border: #618698;
            color: #618698;
            border: 1px solid;
            border-radius: 15px;
            width: 130px;
            height: 60px;
            background: #fff;

            //   display: inline-block;
            //   margin-bottom: 20px;
          }
          span {
            display: block;
            float: right;
            font-size: 30px;
            color: #ff5654;
            font-weight: 800;
          }
        }
      }
    }
  }
  .sxtk {
    //   display: none;
    // width:200px;
    // height: 100%;
    // margin-right: 0;
    // margin-left: 0;
    .zhezhao {
      width: 100%;
      height: 100%;
      background: rgb(240, 240, 240);
      opacity: 0.5;
      position: fixed;
      z-index: 200000;
      top: 0;
    }

    .content {
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 20px;
      width: 90%;
      height: 80%;
      background: #fff;
      position: fixed;
      z-index: 3000000;
      opacity: 1;
      top: 100px;
      left: 20px;
      text-align: center;
      .oneh2 {
        font-size: 40px;
        margin-top: 50px;
      }
      .h2div {
        text-align: left;
        .twoh2 {
          font-size: 40px;
          margin-left: 20px;
        }
      }
      input[type="radio"],
      input[type="checkbox"] {
        width: 0;
      }
      .danxuandiv,
      .fuxuandiv {
        font-size: 25px;
        display: inline-block;
        background: rgb(236, 235, 235);
        width: 120px;
        height: 60px;
        border-radius: 5px;
        line-height: 60px;

        margin-bottom: 80px;
      }
      .tese {
        text-align: left;
        h2 {
          margin-left: 20px;
          font-size: 40px;
        }
      }
      input[type="radio"]:checked + div,
      input[type="checkbox"]:checked + div {
        background: #ff5654;
        color: #fff;
      }
      //   底部
      .under {
        button {
          font-size: 16px;
          &:nth-child(1) {
            float: left;
            // display: inline-block;
            background: #fff;
            border: none;
          }
          &:nth-child(2) {
            float: right;
            margin-right: 20px;
            border: none;
            background: #ff5654;
            color: #fff;
            height: 50px;
            width: 120px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>
